---
interface Props {
  img: string;
  align: "left" | "right";
}

const { img, align } = Astro.props;
---

<div class={`img-and-text ${align}`}>
  <div class="quote">
    <slot name="quote" />
  </div>
  <img src={img} />
</div>

<style>
  .img-and-text {
    width: 100%
    position: relative;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    &.right {
      align-items: flex-end;
    }

    .quote {
      max-width: 640px;
      position: relative;
      background-color: #323444;
      background-image: radial-gradient(
        rgba(150, 150, 150, 0.5) 1.5px,
        #323444 1.5px
      );
      background-size: 30px 30px;
      font-size: 1.2rem;
      line-height: 1.5;
      border-radius: 5px;
      padding: 1rem;
      color: #fff;

      strong {
        font-size: 1.5rem;
        border-bottom: 2px solid #ffb319;
      }
    }

    img {
      max-width: calc(100% - 16px - 2rem);
      box-shadow:
        #00000030 0 16px 16px,
        #0000003b 0 12px 16px;
      border: 8px solid #ffb319;
      margin-top: -1rem;
      margin-left: 1rem;
      margin-right: 1rem;
    }
  }
</style>
